<!-- 底部的选项卡组件 -->
<template>
  <div class="action-sheet" @click="hideActionSheet">
    <ul class="action-sheet-list" :class="{ show: isShowList }">
      <li
        v-for="(item, index) in store.state.actionSheetConfig.list"
        :key="index"
        @click="clickHandler(index)"
      >
        {{ item }}
      </li>
      <li>取消</li>
    </ul>
  </div>
</template>

<script>
// ref为了拿元素, onMounted生命周期，useStore是vuex中创建store实例的
import { onMounted, ref } from "vue";
import { useStore } from "vuex";
export default {
  name: "ActionSheet",
  setup() {
    const store = useStore();
    //最先开始为false在页面上不展示
    let isShowList = ref(false);

    function hideActionSheet() {
      store.commit("hideActionSheet");
    }
    //只有当回调函数的参数为函数时才能调用该index下的方法
    function clickHandler(index) {
      if (typeof store.state.actionSheetConfig.successCallBack === "function") {
        store.state.actionSheetConfig.successCallBack(index);
      }
    }

    //为了显示动画效果 要有延迟（有阶段性的变化）防止样式一步到位
    onMounted(() => {
      setTimeout(() => {
        isShowList.value = true;
      }, 100);
    });
    return { store, isShowList, hideActionSheet, clickHandler };
  },
};
</script>

<style lang="scss" scoped>
.action-sheet {
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  .action-sheet-list {
    background-color: gray;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translateY(100%);
    transition: all 300ms linear;
    li {
      height: 35px;
      @include flexbox(row, center, center);
      background-color: aliceblue;
      border-bottom: 1px solid #ccc;
      &:last-child {
        margin-top: 5px;
      }
    }
    &.show {
      transform: translateY(0);
    }
  }
}
</style>
